<template>
	<div class="list" style="min-height: 800px;">
		<div class="list_box">
			<div class="list_box_index">
				<div class="box_left">
					<span>卖价</span>
					<span :class="(ticket[select.code2]&&ticket[select.code2].wave||0)<=0?'up':'down'">{{(ticket[select.code2]&&ticket[select.code2].ask||0).toFixed(select.digit)||'--'}}</span>
				</div>
				<div class="box_right">
					<span>卖量</span>
					<span >{{(ticket[select.code2]&&ticket[select.code2].asm||0).toFixed(0)||'--'}}</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>买价</span>
					<span :class="(ticket[select.code2]&&ticket[select.code2].wave||0)<=0?'up':'down'">{{ticket[select.code2]?parseFloat(ticket[select.code2].bid||0).toFixed(select.digit):'--'}}</span>
				</div>
				<div class="box_right">
					<span>买量</span>
					<span>{{ticket[select.code2]?parseFloat(ticket[select.code2].bim||0).toFixed(0):'--'}}</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>最新</span>
					<span  :class="(ticket[select.code2]&&ticket[select.code2].wave||0)<=0?'up':'down'">{{ticket[select.code2]?parseFloat(ticket[select.code2].price||0).toFixed(select.digit):'--'}}</span>
				</div>
				<div class="box_right">
					<span>涨跌幅度</span>
					<span :class="(ticket[select.code2]&&ticket[select.code2].wave||0)<=0?'up':'down'">{{ticket[select.code2]?parseFloat(ticket[select.code2].wave||0).toFixed(2):'--'}}%</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>开盘</span>
					<span  :class="(ticket[select.code2]&&ticket[select.code2].wave||0)<=0?'up':'down'">{{ticket[select.code2]?parseFloat(ticket[select.code2].open||0).toFixed(select.digit):'--'}}</span>
				</div>
				<div class="box_right">
					<span>成交量</span>
					<span>--</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>最高</span>
					<span  :class="(ticket[select.code2]&&ticket[select.code2].wave||0)<=0?'up':'down'">{{ticket[select.code2]?parseFloat(ticket[select.code2].high||0).toFixed(select.digit):'--'}}</span>
				</div>
				<div class="box_right">
					<span>持仓量</span>
					<span>{{ticket[select.code2]?parseFloat(ticket[select.code2].position||0).toFixed(0):'--'}}</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>最低</span>
					<span  :class="(ticket[select.code2]&&ticket[select.code2].wave||0)<=0?'up':'down'">{{ticket[select.code2]?parseFloat(ticket[select.code2].low||0).toFixed(select.digit):'--'}}</span>
				</div>
				<div class="box_right">
					<span>日增仓</span>
					<span>--</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>均价</span>
					<span>--</span>
				</div>
				<div class="box_right">
					<span>外盘</span>
					<span>--</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>结算</span>
					<span>--</span>
				</div>
				<div class="box_right">
					<span>内盘</span>
					<span>--</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>昨结</span>
					<span>--</span>
				</div>
				<div class="box_right">
					<span>涨停</span>
					<span>--</span>
				</div>
			</div>
			<div class="list_box_index">
				<div class="box_left">
					<span>昨收</span>
					<span>{{ticket[select.code2]?parseFloat(ticket[select.code2].close||0).toFixed(select.digit):'--'}}</span>
				</div>
				<div class="box_right">
					<span>跌停</span>
					<span>--</span>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
  import {mapState} from 'vuex';
	export default {
    computed: mapState({
      select: state => state.trade.select /* 当前选中股指 */ ,
      symbol: state => state.trade.symbol /* 全部行情 */ ,
      symbos: state => state.trade.symbos /* 当前页面显示行情 */ ,
      ticket: state => state.trade.ticket /*, 推送数据 */
    }),
		name: "list",
		data() {
			return {
				isright: false,
				item:{},
        klineInterval:null
			};
		},
    watch:{
    },
    beforeDestroy(){
      if(this.klineInterval){
        clearInterval(this.klineInterval);
      }
    },
		mounted() {
      this.item = this.select;
			// this.item = this.$store.state.one_show_product;
      // let val = this.$store.state.one_item;
      // this.listid = val.id;
      // this.getlist();
      // this.klineInterval =setInterval(()=>{
      // 	this.getlist();
      // },1000)
		},
		methods: {
			right() {
				this.isright = !this.isright
			},
			rightfalse() {
				this.isright = false
			},
		}
	};
</script>
<style scoped>
	@import url("../../../static/css/popup.css");
.up{
	color: #00FF00;
}
.down{
	color: red;
}
.classa{
	color: #fff;
}
	/*  */
	.list_box {
		width: 100%;
		position: fixed;
		top:1.06rem;
		bottom:1.05rem;
		border: 1px solid #7d0711;
		background: #1d1d1d;
		color: #fff;
		box-sizing: border-box;
	}

	.list_box_index {
		width: 100%;
		height: 1.55rem;
		border-bottom: 1px solid #7d0711;
		display: flex;
		justify-content: space-around;
		font-size: .38rem;
		/* letter-spacing: 3px; */

	}

	.box_left {
		width: 40%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 .2rem;
		box-sizing: border-box;
		font-weight: bold;
	}

	.box_right {
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 .2rem;
		box-sizing: border-box;
		border-left: 1px solid red;
		font-weight: bold;
	}
</style>
